/* 搜索，新增，表格展示 */
import React, {  useState, useEffect  } from 'react';
import { Button, Form, Input ,Space, Table,Modal,} from 'antd';
import Top from './top';
import store from '../../store';
import { observer } from 'mobx-react';
// const { Option } = Select;

const { channel } = store
const Admin=()=>{
    const [form] = Form.useForm();
    // const [, forceUpdate] = useState({}); // To disable submit button at the beginning.
    const [isModalOpen, setIsModalOpen] = useState(false);
    const columns = [
        {
            title: 'SN码',//表格列名
            dataIndex: 'snCode',//对应数据字段
            key: 'snCode',//该列的唯一值
        },
        {
            title: '状态',
            dataIndex: 'snStatus',
            key: 'snStatus',
        },
        {
            title: '开机时间',
            dataIndex: 'upTime',
            key: 'upTime',
        },
        {
            title: '绑定手机号',
            dataIndex: 'bindPhone',
            key: 'bindPhone',
        },
        // {
        //     title: '维修次数',
        //     dataIndex: 'ID',
        //     key: 'ID',
        // },
        {
            title: '绑定时间',
            key: 'bindTime',
            dataIndex: 'bindTime',
        },
        {
            title: '操作',
            render:(_,record)=>(
                <Space size="middle">
                    <Button type={"default"} onClick={showModal(false,record)}>修改</Button>
                    <Button onClick={del(record)} type={"dashed"}>删除</Button>
                 </Space>
            )

        },
    ];
    useEffect(() => {
        if (channel.SN.length === 0) {
            channel.getAllSN()
        }
    }, [])
    // const [channel,setData] = useState([//表格数据
    //     {
    //         key: '1',
    //         id:"SM7514523",
    //         date:"2018-03-24 15:12:12",
    //         name: '已开机',
    //         num: 13698564585,
    //         ID: 1,
    //         bingdate:"2018-03-24 15:12:12"
    //     },
    //     {
    //         key: '2',
    //         id:"SM7514524",
    //         date:"2018-03-24 15:12:12",
    //         name: '已绑定',
    //         num: 12356985665,
    //         ID: 2,
    //         bingdate:"2018-03-24 15:12:12"
    //     },
    //     {
    //         key: '3',
    //         id:"SM7514525",
    //         date:"2018-03-24 15:12:12",
    //         name: '已开机',
    //         num: 13585219634,
    //         ID: 1,
    //         bingdate:"2018-03-24 15:12:12"
    //     },
    //     {
    //         key: '4',
    //         id:"SM7514526",
    //         date:"2018-03-28 09:24:05",
    //         name: '已绑定',
    //         num: 13856892571,
    //         ID: 3,
    //         bingdate:"2018-03-28 09:25:05"
    //     },
    // ]);
    const [formData,setFormData] = useState({
        id:"9",
        snStatus:"9",
        bindPhone:"9",
        snCode:"9",
        bindTime:new Date().toLocaleString(),
        upTime:new Date().toLocaleString(),
        
    })
    const SN=channel.SN
    // useEffect(() => {
    //     forceUpdate({});
    // }, []);

    //搜索框
    // const onFinish = (values) => {
    //     // console.log('Finish:', values);
    //     if(values.snName){
    //         const newData = channel.SN.filter(item => {
    //             if(item.id.indexOf(values.snName) !== -1) return true
    //             else return false
    //         })
    //         // console.log(newData);
    //         // return setData(newData)
    //     }
    //     // setData([//表格数据
    //     //     {
    //     //         key: 'id',
    //     //         id:"snCode",
    //     //         date:"upTime",
    //     //         name: 'snStatus',
    //     //         num: "bindPhone",
    //     //         ID: 1,
    //     //         bingdate:"bindTime"
    //     //     },
    //     //     {
    //     //         key: '2',
    //     //         id:"SM7514524",
    //     //         date:"2018-03-24 15:12:12",
    //     //         name: '已绑定',
    //     //         num: 123569856565,
    //     //         ID: 2,
    //     //         bingdate:"2018-03-24 15:12:12"
    //     //     },
    //     //     {
    //     //         key: '3',
    //     //         id:"SM7514525",
    //     //         date:"2018-03-24 15:12:12",
    //     //         name: '已开机',
    //     //         num: 13585219634,
    //     //         ID: 1,
    //     //         bingdate:"2018-03-24 15:12:12"
    //     //     },
    //     //     {
    //     //         key: '4',
    //     //         id:"SM7514526",
    //     //         date:"2018-03-28 09:24:05",
    //     //         name: '已绑定',
    //     //         num: 13856892571,
    //     //         ID: 3,
    //     //         bingdate:"2018-03-28 09:25:05"
    //     //     },
    //     // ])
    // };
let [findRes,setfindRes] = useState(null)
    //模态框
    const showModal = (isAdd,res) => {
        return ()=>{
            setIsModalOpen(true);
            if(isAdd){
                console.log('新增');
                setFormData({})
            }else{
                console.log('编辑',res);
                form.setFieldsValue(res)
                // ID: 187 bingdate:"2022-22-22" date:"2022-22-22" id:4 key:"4" name:"lhy" num:36
                const findres = channel.SN.find(i => i.key === res.key)
                // console.log(findres);
                // findres.ID = res.ID
                // findres.num = res.num
                // findres.name = res.name
                // findres.id = res.id
                setfindRes(findres)
                // console.log('findRes==>>',findRes);
                // setFormData(()=>{
                //     return{
                //         id:res.id,
                //         name:res.name,
                //         num:res.num,
                //         ID:res.ID,
                //         date:new Date().toLocaleString()
                //     }
                // })    
            }
        }
        
    };
    const del= (record) => {
        return ()=>{
            console.log(record);
            // const newData = channel.SN.filter(item =>item.key !== record.key )
            // setData(newData)
        }
    }

    const handleOk = () => {
        setIsModalOpen(false);
        console.log(form.getFieldsValue(),findRes.id);
        channel.xiugai(form.getFieldsValue(),findRes.id)
        // const newData = channel.SN.filter(item => item.key !== findRes?.key)
        // console.log(newData);
        // setData([   
        //     {
        //         key:channel.SN.length+1+'',
        //         date:new Date().toLocaleString(),
        //         bingdate:new Date().toLocaleString(),
        //         ...formData
        //     },
        //     ...newData,
        // ])
    };

    const handleCancel = () => {
        console.log("取消")
        setIsModalOpen(false);
    };
    const inputChangeHandler = (key,e)=>{
        setFormData((state)=>{
            return{
                ...state,
                [key]:e.target.value
            }
        })
    }
    // const searchFromSn = (e)=>{
    //     console.log(e.target.value);
    // }
    return (
        <>
        <Top/>
            <Table columns={columns} dataSource={channel.SN} />
            {/*新增弹框*/}
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} getContainer={false}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 5,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    autoComplete="off"
                    initialValues={formData}
                    form={form}
                >
                    <Form.Item
                    // initialValue={formData.id}
                        label="SN码"
                        name="snCode"
        //                 id:"9",
        // snStatus:"9",
        // bindPhone:"9",
        // snCode:"9",
        // bindTime:new Date().toLocaleString(),
        // upTime:new Date().toLocaleString(),
                    >
                        <Input value={formData.id} onChange={(e)=>{inputChangeHandler('id',e)}}/>
                    </Form.Item>

                    <Form.Item
                    // initialValue={formData.name}
                        label="状态"
                        name="snStatus"
                        // rules={[
                        //     {
                        //         required: true,
                        //         message: 'Please input your username!',
                        //     },
                        // ]}
                    >
                        <Input value={formData.name} onChange={(e)=>{inputChangeHandler('name',e)}}/>
                    </Form.Item>
                    <Form.Item
                    // initialValue={formData.date}
                        label="开机时间"
                        name="upTime"
                        
                    >
                        <Input disabled/>
                    </Form.Item>
                    <Form.Item
                    // initialValue={formData.num}
                        label="手机号"
                        name="bindPhone"
                        
                    >
                        <Input value={formData.num} onChange={(e)=>{inputChangeHandler('num',e)}}/>
                    </Form.Item>
                    <Form.Item
                    // initialValue={formData.ID}
                        label="维修次数"
                        name="weixiu"
                        // initialValue={"普通管理员"}
                    >
                    <Input value={formData.id} onChange={(e)=>{inputChangeHandler('id',e)}}/>
                    </Form.Item>
                    <Form.Item
                    // initialValue={formData.date}
                        label="绑定时间"
                        name="bindTime"
                    >
                        <Input disabled/>
                    </Form.Item>
                </Form>
            </Modal>
        </>

    );
}
export default  observer(Admin);   